<template>
	<view class="list">
		<view class="setting">
			<view @click="setStatus(2)" v-if="status === 1">
				<image :src="ossUrl + `/static/23.png`" mode=""></image>
				管理
			</view>
			<view v-if="status === 2" @click="setAll">
				全选
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="onReachBottomReset">
			<template v-if="list.length > 0">
				<view class="productsVue">
					<view class="product-list-item" v-for="it in list" :key="it.id" @click="setKey(it.id,it)">
						<image :src="it.banner" mode="aspectFill" class="product-list-item-img"></image>
						<view class="product-list-item-r">
							<view class="product-list-item-r-title">{{it.name || ''}}</view>
							<!-- <view class="product-list-item-r-guige">
								规格: 5杆/7套
							</view> -->
							<view class="product-list-item-r-price">
								￥{{it.price || ''}}
							</view>
						</view>
						
						<view class="list_item-rig1" v-if="status === 2">
							<image :src="keys.includes(it.id) ? ossUrl + '/static/image/g.png' : ossUrl + `/static/1.png`" mode=""></image>
						</view>
					</view>
				</view>
			</template>
			<view class="noData" style="padding-bottom:120rpx;" v-else>
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
			</view>
			<u-gap :height="75"></u-gap>
		</scroll-view>
		<view class="btns" v-if="status == 2" @click="del">删除</view>
	</view>
</template>

<script>
	import {
		InformationUserCollect,InformationDelUserCollect,goodsCollection,InformationMyIncome
	} from '@/common/http/api.js'
	export default {
		props: {
			circle_id: {
				type: Number,
				default: () => 0
			},
		},
		data(){
			return {
				params: {
					page: 1,
					circle_id: 0,
					type:3
				},
				isList: true,
				list: [],
				status: 1,
				keys: [],
				card: '',
				founder: 2 //1 联创
			}
		},
		created() {
			InformationMyIncome().then(res => {
				this.founder = res.data.founder
			})
			
		},
		watch:{
			circle_id: {
				handler(val){
					this.params.circle_id = val
					this.reload()
				},
				deep: true,
				immediate: true
			}
		},
		methods:{
			del(){
				if(this.keys.length === 0) {
					uni.showToast({duration:3000,
						title:'请选择数据',
						icon:'none'
					})
					return false
				}
				uni.showModal({
				    title: '',
				    content: '确定取消收藏吗？',
				    showCancel: true,
				    cancelText: '取消',
				    confirmText: '确认',
					confirmColor: '#12B475',
				    success:res=> {
				        if (res.confirm) {
				            console.log('用户点击确认按钮');
							
							let data = {
								id:this.keys.join(','),
								type:1
							}
							
							// InformationDelUserCollect(data).then(res => {
							// 	uni.hideLoading()
							// 	this.reload()
							// })
							
							let ids = this.keys
							let promissArr = []
							ids.forEach(i => {
								promissArr.push(goodsCollection({id: i}))
							})
							uni.showLoading()
							Promise.all(promissArr).then(res=>{
								uni.hideLoading()
								this.reload()
							}).catch(e=>{
								this.reload()
							})
							
				            // 在这里添加用户点击确认后的逻辑
				        } else if (res.cancel) {
				            console.log('用户点击取消按钮');
				            // 在这里添加用户点击取消后的逻辑
				        }
				    }
				});
				
				
			},
			setAll(){
				if(this.keys.length === this.list.length) {
					this.keys = []
				} else {
					this.keys = this.list.map(i=>i.id)
				}
			},
			setKey(e,it){
				console.log('e',e,it)
				if(this.status === 1) {
					if(this.founder === 1) {
						//联创
						uni.navigateTo({
							url:'/pagesA/shopping/detail?id='+it.gid+'&type=3&business_card_id='
						})
					} else {
						uni.navigateTo({
							url:'/pagesA/shopping/detail?id='+it.gid+'&type=2&business_card_id='
						})
					}
				} else {
					if(this.keys.includes(e)) {
						this.keys = this.keys.filter(i=> i != e)
					} else {
						this.keys.push(e)
					}
					console.log('this.keys', this.keys)
				}
				
			},
			setStatus(e){
				this.status = e
				this.keys = []
			},
			reload() {
				this.params.page = 1
				this.list = []
				this.init()
			},
			onReachBottomReset() {
				console.log('触底')
				if (this.isList) {
					this.params.page++
					this.init()
				}
			},
			init() {
				// if(this.params.circle_id === 0) return
				uni.showLoading()
				InformationUserCollect(this.params).then(res => {
					uni.hideLoading()
					if (Array.isArray(res.data) && res.data.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data
						} else {
							this.list = this.list.concat(res.data)
						}
					} else {
						this.isList = false
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
	
		.list-item {
			width: 100%;
			border-bottom: 10rpx solid #F6F7F8;
			background: #FFFFFF;
			.list_item {
				box-sizing: border-box;
				padding: 39rpx 49rpx;
				display: flex;
				align-items: center;
	
				.list_item-img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 13rpx;
				}
	
				.list_item-content {
					width: 0;
					flex: 1;
	
					.list_item-content-h {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 16rpx;
	
						.list_item-content-h-name {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
	
							image {
								margin-left: 14rpx;
								width: 26rpx;
								height: 26rpx;
							}
						}
	
						.list_item-content-h-address {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #7A7A7A;
							
							image {
								margin-right: 10rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}
	
					.list_item-content-subTitle {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						margin-bottom: 17rpx;
	
						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #12B475;
							margin-left: 36rpx;
						}
					}
	
					.list_item-content-address {
						min-width: 0;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						//height: 23rpx;
					}
				}
	
				
			}
		}
	}
	.list_item-rig1 {
		width: 120rpx;
		display: flex;
		
		justify-content: center;
		align-items: center;
		image {
			width: 34rpx;
			height: 34rpx;
		}
	}
	.setting {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		view {
			font-family: PingFang;
			font-weight: 500;
			font-size: 30rpx;
			color: #12B475;
			display: flex;
			align-items: center;
			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 5rpx;
			}
		}
	}
	.btns {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 121rpx;
		background: #12B475;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.scroll-Y {
		width: 100vw;
		height: calc(100vh - 35rpx - 77rpx);
	}
	.productsVue {
		width: 690rpx;
		margin: 0 auto;
		padding-top: 2rpx;
		.product-list-item {
			width: 100%;
			display: flex;
			height: 210rpx;
			border-radius: 20rpx;
			background: #fff;
			box-shadow: 0rpx 0rpx 5rpx #555; 
			margin-bottom: 20rpx;
			.product-list-item-img {
				width: 280rpx;
				height: 210rpx;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				margin-right: 20rpx; 
			}
			.list_item-rig {
				flex: 1;
				min-width: 0;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				image {
					width: 34rpx;
					height: 34rpx;
				}
			}
			.product-list-item-r {
				width: 400rpx;
				box-sizing: border-box;
				padding: 20rpx;
				.product-list-item-r-title {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.product-list-item-r-guige {
					width: fit-content;
					background: #F8F8F8;
					padding: 1rpx 18rpx;
					border-radius: 5rpx;
					font-size: 28rpx;
					color: #A1A0A3;
					margin-bottom: 20rpx; 
				}
				.product-list-item-r-price {
					font-size: 36rpx;
					color: #E7373A;
					margin-bottom: 20rpx;
					span {
						margin-left: 20rpx;
						font-size: 24rpx;
						color: #828186;
					}
				}
				.product-list-item-r-num {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					margin-bottom: 20rpx;
				}
				.product-list-item-r-btn {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					box-sizing: border-box;
					
					&>view {
						width: 100rpx;
					}
				}
				
			}
		}
	}
</style>